import React from 'react';
import style from './style.okr';
import Priority from './Priority';
import TeamProcess from './TeamProcess';
import OkrProcess from './OkrProcess';
import cx from 'classnames';
import moment from 'moment';
import util from '../../../util';
import { Link } from 'sq-ui';
import { NextGuide } from '../../guide/Guide';
import { findDOMNode } from 'react-dom';

class TeamOkr extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'TeamOkr';
        this.state = {
            progressStatus: 1,
            ...this.buildData(props.okrs||{})
        }
    }
    buildData(v) {
        const {
            objectiveVOList: okrs = []
        } = v;
        const okrs1 = okrs,
            okrs2 = okrs.filter(v => +v.progress === 0),
            okrs3 = okrs.filter(v => +v.progress > 0 && v.progress < .6),
            okrs4 = okrs.filter(v => +v.progress >= .6);
        return {
            okrs1, okrs2, okrs3, okrs4
        }
    }
    componentWillReceiveProps(nextProps) {
        if(!util.isShallowEqual(this.props, nextProps)){
            this.setState( {
                ...this.buildData(nextProps.okrs||{})
            });
        }
    }

    componentWillUpdate(props) {
        if (props.app.naviStep === 1 && props.app.guide == 2) {
            setTimeout(() => {
                findDOMNode(this.props.root).scrollTop = 9999;
            }, 150);
        }
    }

    onChange = (type) => {
        this.setState({
            progressStatus: type,
        });
    }
    render() {
        const {
            okrs1,
            okrs2,
            okrs3,
            okrs4,
        } = this.state;
        const data = [
            {value: okrs2.length, text: '尚未开始', fill: '#fa91a0', type: 2},
            {value: okrs3.length, text: '正在进行', fill: '#f9ea94', type: 3},
            {value: okrs4.length, text: '接近完成', fill: '#7fd7af', type: 4},
        ]
        const {
            okrs = {},
        } = this.props;
        const objectiveVOList = this.state[`okrs${this.state.progressStatus}`]
        const {thumbup = []} = okrs;
        const { guide, naviStep } = this.props.app;
        return (
            <div className={style['okr-layout']} style={{ position: 'relative' }}>
                <TeamProcess data={data} onChange={this.onChange} />
                <div className={style['okr-area']} style={{width: '805px'}}>
                    {
                        objectiveVOList.slice(0,3).map((v, i) => {
                            const {
                                lastModifiedTime,
                                lastModifiedUserProfile,
                            } = v;
                            return (
                                <div className={style['okr-team-item']} key={i}>
                                    <div style={{width: '400px'}}  className={style['okr-team-title']}>
                                        <div style={{width: '400px'}}  className={style['ell']}><a  onClick={()=>{this.props.toOkr(null,v.objectiveId)}}>{v.content}</a></div>
                                        <div className={style['ell']}>
                                            <div  style={{maxWidth: '400px'}} className={cx({
                                                [style['okr-team-tag']]: true, [style['ell']]:true
                                            })}>
                                                {
                                                    v.directorList.slice(0, 5).map((_v, i) => {
                                                        const { coreUserProfileVO: u } = _v;
                                                        if (i == v.directorList.slice(0, 5).length-1) {
                                                            return <Link style={{ color: '#8aa4c0' }} target="_blank" key={i} label={`${u.fullName} `} to={`/okr/objective-targetAll?userId=${u.userId}`} />;
                                                        }
                                                        return <Link style={{ color: '#8aa4c0' }} target="_blank" key={i} label={`${u.fullName}、`} to={`/okr/objective-targetAll?userId=${u.userId}`} />;
                                                    })
                                                }
                                                {
                                                    v.directorList.length > 5?
                                                        <span>等人</span>: null
                                                }
                                                {
                                                    util.isNull(v.directorList) ?
                                                        <span>未分配</span>: null
                                                }
                                            </div>
                                        </div>
                                    </div>
                                    <div style={{width: '45px'}}>
                                        <Priority label value={v.priority}/>
                                    </div>
                                    <div style={{width: '105px',verticalAlign:'top',paddingLeft:'10px'}}>
                                        <OkrProcess value={v.progress} width={105} height={8} />
                                    </div>
                                    <div style={{width: '45px'}} className={style['okr-process-text']}>{`${Math.round(v.progress*100)}%`}</div>
                                    { thumbup[i] ? <div
                                    className={style["kr-like"]+" "+style[thumbup[i].isThumpBup == 0 ? "kr-islike": "kr-notlike"]}
                                >
                                    <img className={style["kr-like-icon"]} src={`${util.getImagePath()}/default/kr-like.png`} alt=""/>
                                    <img className={style["kr-islike-icon"]} src={`${util.getImagePath()}/default/kr-islike.png`} alt=""/>
                                    <span>{thumbup[i] != null ? thumbup[i].total : 0}</span>
                                </div> : null}
                                    <div style={{width: '120px'}} className={style['okr-info']}>
                                        <div style={{width: '120px'}} className={style['ell']}>
                                            {lastModifiedUserProfile.fullName} {moment(lastModifiedTime).fromNow()}更新
                                        </div>
                                    </div>
                                </div>
                            );
                        })
                    }
                </div>
                {
                    (naviStep == 1 && guide == 2) ? (
                        <NextGuide
                            left
                            large
                            str="点击这里，查看所在团队目标的完整列表"
                            styles={{
                                right: '96px',
                                bottom: '-4px',
                            }}
                        />
                    ) : null
                }
            </div>
        );
    }
}

export default TeamOkr;
